<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 9560 4955 -->
  <div
    class="map-wrapper"
    @wheel="mouseWheel"
    @mousedown="mousedown"
    @mouseup="mouseup"
    @mousemove="mousemove"
    ref="mapSVG"
    @click="handleMapClick"
    :draggable="false"
  >
    <div ref="mapContainer" class="svgMap"></div>
    <svg
      ref="mapContainer"
      class="svgMap"
      viewBox="0 0 9560  4955"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :style="`transform:scale(${data.scale}) translate(${data.x}px,${data.y}px);cursor:${data.cursor};`"
    >
      <image :xlink:href="
            require('../../../assets/png/map.png')
          " />
      <!-- 模块1 -->
      <g transform="translate(3400,0) scale(2.5)">
        <image
          v-if="data.model1 > 20"
          x="100"
          y="100"
          :xlink:href="
            require('../../../assets/png/热力图-绿.png')
          "
        />
        <image
          v-if="data.model1 >= 50"
          x="150"
          y="150"
          :xlink:href="
            require('../../../assets/png/热力图-黄.png')
          "
        />
        <image
          v-if="data.model1 >= 100"
          x="200"
          y="200"
          :xlink:href="
            require('../../../assets/png/热力图-红.png')
          "
        />
      </g>
      <!-- 模块2 -->
      <g transform="translate(3900,1800) scale(1.8)">
        <image
          v-if="data.model2 > 20"
          x="100"
          y="100"
          :xlink:href="
            require('../../../assets/png/热力图-绿.png')
          "
        />
        <image
          v-if="data.model2 >= 50"
          x="150"
          y="150"
          :xlink:href="
            require('../../../assets/png/热力图-黄.png')
          "
        />
        <image
          v-if="data.model2 >= 100"
          x="200"
          y="200"
          :xlink:href="
            require('../../../assets/png/热力图-红.png')
          "
        />
      </g>
      <!-- 模块3 -->
      <g transform="translate(2700,2950) scale(1.6)">
       <image
          v-if="data.model3 > 20"
          x="100"
          y="100"
          :xlink:href="
            require('../../../assets/png/热力图-绿.png')
          "
        />
        <image
          v-if="data.model3 >= 50"
          x="150"
          y="150"
          :xlink:href="
            require('../../../assets/png/热力图-黄.png')
          "
        />
        <image
          v-if="data.model3 >= 100"
          x="200"
          y="200"
          :xlink:href="
            require('../../../assets/png/热力图-红.png')
          "
        />
      </g>
      <!-- 模块4 -->
      <g transform="translate(4500,3550) scale(1.6)">
       <image
          v-if="data.model4 > 20"
          x="100"
          y="100"
          :xlink:href="
            require('../../../assets/png/热力图-绿.png')
          "
        />
        <image
          v-if="data.model4 >= 50"
          x="150"
          y="150"
          :xlink:href="
            require('../../../assets/png/热力图-黄.png')
          "
        />
        <image
          v-if="data.model4 >= 100"
          x="200"
          y="200"
          :xlink:href="
            require('../../../assets/png/热力图-红.png')
          "
        />
      </g>
      <!-- 模块5 -->
      <g transform="translate(5400,1300) scale( 2.5 4 )">
       <image
          v-if="data.model5 > 20"
          x="100"
          y="100"
          :xlink:href="
            require('../../../assets/png/热力图-绿.png')
          "
        />
        <image
          v-if="data.model5 >= 50"
          x="150"
          y="150"
          :xlink:href="
            require('../../../assets/png/热力图-黄.png')
          "
        />
        <image
          v-if="data.model5 >= 100"
          x="200"
          y="200"
          :xlink:href="
            require('../../../assets/png/热力图-红.png')
          "
        />
      </g>
      <!-- 模块6 -->
      <g transform="translate(5600,200) scale(2.5 1.5)">
       <image
          v-if="data.model6 > 20"
          x="100"
          y="100"
          :xlink:href="
            require('../../../assets/png/热力图-绿.png')
          "
        />
        <image
          v-if="data.model6 >= 50"
          x="150"
          y="150"
          :xlink:href="
            require('../../../assets/png/热力图-黄.png')
          "
        />
        <image
          v-if="data.model6 >= 100"
          x="200"
          y="200"
          :xlink:href="
            require('../../../assets/png/热力图-红.png')
          "
        />
      </g>
    </svg>
    <div class="tool-container">
      <div class="tool-group">
        <div class="tool-item subtract" @click="handleScale(-0.1)">
          <img class="icon" src="../../../assets/png/subtract.png" alt srcset />
        </div>
        <div class="line-split"></div>
        <div class="tool-item add" @click="handleScale(0.1)">
          <img class="icon" src="../../../assets/png/add.png" alt srcset />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps, watch } from "vue";

const props = defineProps(["data"]);
// 模块1:c1,c26
// 模块2：c27, c18
// 模块3: c28
// 模块4: c29
// 模块5: c8,c9,c30,c31
// 模块6: c3 c5

watch(
  () => props.data,
  curr => {
    // console.log(curr)
    (curr || []).forEach(el => {
      if (["C1", "C26"].indexOf(el.name.toUpperCase()) > -1) {
        data.model1 += Number(el.value);
      } else if (["C27", "C18"].indexOf(el.name.toUpperCase()) > -1) {
        data.model2 += Number(el.value);
      } else if (["C28"].indexOf(el.name.toUpperCase()) > -1) {
        data.model3 += Number(el.value);
      } else if (["C9"].indexOf(el.name.toUpperCase()) > -1) {
        data.model4 += Number(el.value);
      } else if (
        ["C8", "C9", "C30", "C31"].indexOf(el.name.toUpperCase()) > -1
      ) {
        data.model5 += Number(el.value);
      } else if (["C3", "C5"].indexOf(el.name.toUpperCase()) > -1) {
        data.model6 += Number(el.value);
      }
    });
  }
);
const mapContainer = ref(null);
const mapSVG = ref(null);
const data = reactive({
  model1: 0,
  model2: 0,
  model3: 0,
  model4: 0,
  model5: 0,
  model6: 0,
  scale: 1,
  x: 0,
  y: 0,
  cursor: "default",
  fullScreen: false,
  lastClientX: 0,
  lastClientY: 0
});

const handleScale = param => {
  data.scale += param;
};
const handleFullScreen = () => {
  data.fullScreen = !data.fullScreen;
  if (data.fullScreen) {
    mapSVG.value.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
};
const mouseWheel = e => {
  e.stopPropagation();
};
const mousedown = e => {
  if (e.target.className !== "mapSVG") {
    data.lastClientX = e.clientX;
    data.lastClientY = e.clientY;
    data.cursor = "move";
    console.log("mousedown");
  }
};
const mouseup = e => {
  data.lastClientX = null;
  data.lastClientY = null;
  data.cursor = "default";
};
const mousemove = e => {
  if (data.lastClientX && data.lastClientY) {
    const { clientX, clientY } = e;

    data.x = data.x + (clientX - data.lastClientX) / data.scale;
    data.y = data.y + (clientY - data.lastClientY) / data.scale;
    console.log(data.x, data.y);
    data.lastClientX = e.clientX;
    data.lastClientY = e.clientY;
  }
};
const handleMapClick = e => {
  //   console.log(e.target.getAttribute("class"));
};
const init = () => {};
onMounted(() => {
  init();
});
</script>

<style lang="less">
.map-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow: hidden;
  background: #ecf3f7;
  .svgMap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }
  .tool-container {
    position: absolute;
    bottom: 8px;
    right: 8px;
    .tool-group {
      margin-bottom: 16px;
      width: 40px;
      height: 80px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
      border-radius: 8px;
      overflow: hidden;
      .line-split {
        width: 40px;
        height: 1px;
        background: #e8e8e8;
      }
      .tool-item {
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s linear;
        .icon {
          width: 18px;
          height: 18px;
        }
        &:hover {
          background: #edecec7a;
        }
        &:active {
          background: #dddcdc7a;
        }
      }
    }
    .expend {
      cursor: pointer;
      width: 40px;
      height: 40px;
      background: #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s linear;
      &:hover {
        background: #edecec7a;
      }
      &:active {
        background: #dddcdc7a;
      }
      .icon {
        width: 18px;
        height: 18px;
      }
    }
  }
}
.shadrow {
  width: 1000px;
  height: 1000px;
  background: rgba(243, 63, 63, 1);
  opacity: 0.9;
}
</style>